<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import { debounce } from '@/utils'
import echarts from 'echarts'

const animationDuration = 6000

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null,
      chartOption:{
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: [{ top: 10, bottom: 40, left: '10%', right: '63%',containLabel: false },{ top: 10, bottom: 40, left: '37%', right: '36%' ,containLabel: false},{ top: 10, bottom: 40, left: '64%', right: '9%' ,containLabel: false}],
        // dataset: {
        //   source: [
        //     ['product', '智能拖拉机', '智能插秧机', '智能植保机'],
        //     ['作业总面积(亩)', 350, 300, 721.5],
        //     ['作业总时长(h)', 20, 15, 13.2],
        //     ['作业总效率(亩/h)', 17.5, 15, 54.7]
        //   ]
        // },
        xAxis: [
          { type: 'category',gridIndex: 0  ,data: ['作业总面积(亩)']},
          { type: 'category',gridIndex: 1  ,data: ['作业总时长(h)']},
          { type: 'category',gridIndex: 2  ,data: ['作业总效率(亩/h)']}
          ],
        yAxis: [{gridIndex: 0,show:false },{gridIndex: 1 ,show:false},{gridIndex: 2 ,show:false}],
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#48b568'
              }
            },
            data:[0],
            name:"智能拖拉机",
            xAxisIndex: 0, yAxisIndex: 0,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#7a58c3'
              }
            },
            data:[0],
            name:"智能插秧机",
            xAxisIndex: 0, yAxisIndex: 0,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5aaef3'
              }
            },
            data:[0],
            name:"智能植保机",
            xAxisIndex: 0, yAxisIndex: 0,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#48b568'
              }
            },
            data:[0],
            name:"智能拖拉机",
            xAxisIndex: 1, yAxisIndex: 1,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#7a58c3'
              }
            },
            data:[0],
            name:"智能插秧机",
            xAxisIndex: 1, yAxisIndex: 1,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5aaef3'
              }
            },
            data:[0],
            name:"智能植保机",
            xAxisIndex: 1, yAxisIndex: 1,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#48b568'
              }
            },
            data:[0],
            name:"智能拖拉机",
            xAxisIndex: 2, yAxisIndex: 2,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#7a58c3'
              }
            },
            name:"智能插秧机",
            data:[0],
            xAxisIndex: 2, yAxisIndex: 2,
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#5aaef3'
              }
            },
            name:"智能植保机",
            data:[0],
            xAxisIndex: 2, yAxisIndex: 2,
          }
        ]
      }
    }
  },
  watch: {
    "chartData": {
      handler(newVal, oldVal){
        console.log("newVal",newVal.chartDataA)
        const result = newVal.chartDataA
        if(newVal.chartDataA == null || newVal.chartDataA.length ===0) {
          this.chartOption.series[0].name = ""
          this.chartOption.series[0].data = 0
          this.chartOption.series[3].name = ""
          this.chartOption.series[3].data = 0
          this.chartOption.series[6].name = ""
          this.chartOption.series[6].data = 0

          this.chartOption.series[1].name = ""
          this.chartOption.series[1].data = 0
          this.chartOption.series[4].name = ""
          this.chartOption.series[4].data = 0
          this.chartOption.series[7].name = ""
          this.chartOption.series[7].data = 0

          this.chartOption.series[2].name = ""
          this.chartOption.series[2].data = 0
          this.chartOption.series[5].name = ""
          this.chartOption.series[5].data = 0
          this.chartOption.series[8].name = ""
          this.chartOption.series[8].data = 0
        }else if(newVal.chartDataA.length ===1) {
          this.chartOption.series[0].name = result[0].eq_type
          this.chartOption.series[0].data = [result[0].work_area]
          this.chartOption.series[3].name = result[0].eq_type
          this.chartOption.series[3].data = [result[0].work_cost]
          this.chartOption.series[6].name = result[0].eq_type
          this.chartOption.series[6].data = [result[0].work_eff]

          this.chartOption.series[1].name = ""
          this.chartOption.series[1].data = 0
          this.chartOption.series[4].name = ""
          this.chartOption.series[4].data = 0
          this.chartOption.series[7].name = ""
          this.chartOption.series[7].data = 0

          this.chartOption.series[2].name = ""
          this.chartOption.series[2].data = 0
          this.chartOption.series[5].name = ""
          this.chartOption.series[5].data = 0
          this.chartOption.series[8].name = ""
          this.chartOption.series[8].data = 0
        }else if(newVal.chartDataA.length === 2) {
          this.chartOption.series[0].name = result[0].eq_type
          this.chartOption.series[0].data = [result[0].work_area]
          this.chartOption.series[3].name = result[0].eq_type
          this.chartOption.series[3].data = [result[0].work_cost]
          this.chartOption.series[6].name = result[0].eq_type
          this.chartOption.series[6].data = [result[0].work_eff]

          this.chartOption.series[1].name = result[1].eq_type
          this.chartOption.series[1].data = [result[1].work_area]
          this.chartOption.series[4].name = result[1].eq_type
          this.chartOption.series[4].data = [result[1].work_cost]
          this.chartOption.series[7].name = result[1].eq_type
          this.chartOption.series[7].data = [result[1].work_eff]

          this.chartOption.series[2].name = ""
          this.chartOption.series[2].data = 0
          this.chartOption.series[5].name = ""
          this.chartOption.series[5].data = 0
          this.chartOption.series[8].name = ""
          this.chartOption.series[8].data = 0
        }else if(newVal.chartDataA.length > 2){
          this.chartOption.series[0].name = result[0].eq_type
          this.chartOption.series[0].data = [result[0].work_area]
          this.chartOption.series[3].name = result[0].eq_type
          this.chartOption.series[3].data = [result[0].work_cost]
          this.chartOption.series[6].name = result[0].eq_type
          this.chartOption.series[6].data = [result[0].work_eff]

          this.chartOption.series[1].name = result[1].eq_type
          this.chartOption.series[1].data = [result[1].work_area]
          this.chartOption.series[4].name = result[1].eq_type
          this.chartOption.series[4].data = [result[1].work_cost]
          this.chartOption.series[7].name = result[1].eq_type
          this.chartOption.series[7].data = [result[1].work_eff]

          this.chartOption.series[2].name = result[2].eq_type
          this.chartOption.series[2].data = [result[2].work_area]
          this.chartOption.series[5].name = result[2].eq_type
          this.chartOption.series[5].data = [result[2].work_cost]
          this.chartOption.series[8].name = result[2].eq_type
          this.chartOption.series[8].data = [result[2].work_eff]
        }
        this.initChart()
      }
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'dark')
      this.chart.setOption(this.chartOption)
    }
  }
}
</script>
